<template>
  <div class="new p-4">
    <div class="content">
      <a-form>
        <!-- 基本信息 -->
        <span class="title">货物托运单</span>
        <a-row class="marginTop">
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div class="sign">运单号:</div>
            <div>
              <a-input value="自动生成" disabled />
            </div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div>转入单号:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div class="sign">运单日期:</div>
            <div><a-date-picker v-model:value="value1" :format="dateFormat" /></div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div class="sign">始发网点:</div>
            <div><a-input value="现代物流交易平台" disabled /></div>
          </a-col>
        </a-row>

        <!-- 寄件收件 -->
        <a-row class="marginTop5 borderTop">
          <a-col :md="24" :lg="12">
            <div class="start address">
              <div>
                <div>
                  <HomeOutlined :style="{ fontSize: '30px', color: '#262626' }" />
                </div>
                <div>发货方</div>
              </div>
              <div>
                <div>
                  <a-row>
                    <a-col :md="12" class="inputDiv marginTop5">
                      <div>客户编码:</div>
                      <div><a-input v-model:value="value" /></div>
                    </a-col>
                    <a-col :md="12" class="inputDiv marginTop5">
                      <div class="sign">发货公司:</div>
                      <div><a-input v-model:value="value" /></div>
                    </a-col>
                  </a-row>
                </div>
                <div class="threeCol towCol">
                  <a-row>
                    <a-col :lg="24" :xl="8" class="inputDiv marginTop5">
                      <div class="sign">发货人:</div>
                      <div>
                        <a-input v-model:value="value" />
                      </div>
                    </a-col>
                    <a-col :xs="24" :sm="12" :lg="12" :xl="8" class="inputDiv marginTop5">
                      <div class="sign">发货手机:</div>
                      <div>
                        <a-input v-model:value="value" />
                      </div>
                    </a-col>
                    <a-col :xs="24" :sm="12" :lg="12" :xl="8" class="inputDiv marginTop5">
                      <div>发货电话:</div>
                      <div>
                        <a-input v-model:value="value" />
                      </div>
                    </a-col>
                  </a-row>
                </div>
                <div class="inputDiv marginTop5">
                  <div class="sign">省市区:</div>
                  <div><a-input v-model:value="value" /></div>
                </div>
                <div class="inputDiv marginTop5">
                  <div class="sign">详细地址:</div>
                  <div><a-input v-model:value="value" /></div>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :md="24" :lg="12">
            <div class="end address">
              <div>
                <UserOutlined :style="{ fontSize: '30px', color: '#262626' }" />
                <div>收货方</div>
              </div>
              <div>
                <div>
                  <a-row>
                    <a-col :md="12" class="inputDiv marginTop5">
                      <div>客户编码:</div>
                      <div><a-input v-model:value="value" /></div>
                    </a-col>
                    <a-col :md="12" class="inputDiv marginTop5">
                      <div class="sign">发货公司:</div>
                      <div><a-input v-model:value="value" /></div>
                    </a-col>
                  </a-row>
                </div>
                <div class="threeCol towCol marginTop5">
                  <a-row>
                    <a-col :lg="24" :xl="8" class="inputDiv marginTop5">
                      <div class="sign">收货人:</div>
                      <div>
                        <a-input v-model:value="value" />
                      </div>
                    </a-col>
                    <a-col :xs="24" :sm="12" :lg="12" :xl="8" class="inputDiv marginTop5">
                      <div class="sign">收货手机:</div>
                      <div>
                        <a-input v-model:value="value" />
                      </div>
                    </a-col>
                    <a-col :xs="24" :sm="12" :lg="12" :xl="8" class="inputDiv marginTop5">
                      <div>收货电话:</div>
                      <div>
                        <a-input v-model:value="value" />
                      </div>
                    </a-col>
                  </a-row>
                </div>
                <div class="inputDiv marginTop5">
                  <div class="sign">省市区:</div>
                  <div>
                    <a-input v-model:value="value" />
                  </div>
                </div>
                <div class="inputDiv marginTop5">
                  <div class="sign">详细地址:</div>
                  <div>
                    <a-input v-model:value="value" />
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>

        <!-- 寄件收件 - 其他信息 -->
        <a-row>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div>产品类型:</div>
            <div>
              <a-select v-model:value="value3" placeholder="请选择">
                <a-select-option value="lucy">速提闪送</a-select-option>
                <a-select-option value="lucy">定时达</a-select-option>
                <a-select-option value="lucy">定日达</a-select-option>
                <a-select-option value="lucy">省日达</a-select-option>
                <a-select-option value="lucy">普通产品</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div>客户单号:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div>时效:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div>保价金额:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div class="sign">运单类型:</div>
            <div>
              <a-select v-model:value="value3" placeholder="请选择">
                <a-select-option value="lucy">平台网络</a-select-option>
                <a-select-option value="lucy">内部运力</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div>目的区域:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div>目的网点:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :xs="12" :md="6" class="inputDiv marginTop5">
            <div>目的地坐标:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
        </a-row>

        <!-- 货物信息 -->

        <a-row class="borderTop marginTop">
          <a-col :xs="24" :md="24" :lg="12" class="marginTop5">
            <div class="titleH4">货物信息</div>
            <a-row>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">货物名称:</div>
                <div><a-input v-model:value="value" /></div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">包装类型:</div>
                <div>
                  <a-select v-model:value="value3" placeholder="请选择">
                    <a-select-option value="lucy">纸箱</a-select-option>
                    <a-select-option value="lucy">木架</a-select-option>
                    <a-select-option value="lucy">纤袋</a-select-option>
                    <a-select-option value="lucy">膜</a-select-option>
                    <a-select-option value="lucy">草捆</a-select-option>
                  </a-select>
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">货物单位:</div>
                <div>
                  <a-select v-model:value="value3" placeholder="请选择">
                    <a-select-option value="lucy">件</a-select-option>
                    <a-select-option value="lucy">包</a-select-option>
                    <a-select-option value="lucy">托</a-select-option>
                    <a-select-option value="lucy">桶</a-select-option>
                    <a-select-option value="lucy">其他</a-select-option>
                  </a-select>
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">交货类型:</div>
                <div>
                  <a-select v-model:value="value3" placeholder="请选择">
                    <a-select-option value="lucy">送货</a-select-option>
                    <a-select-option value="lucy">自提</a-select-option>
                  </a-select>
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">数量:</div>
                <div>
                  <a-input v-model:value="value" placeholder="(件)" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">重量:</div>
                <div>
                  <a-input v-model:value="value" placeholder="(kg)" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">体积:</div>
                <div>
                  <a-input v-model:value="value" placeholder="(方)" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">计费重量:</div>
                <div>
                  <a-input v-model:value="value" placeholder="(kg)" />
                </div>
              </a-col>
            </a-row>
          </a-col>
          <a-col :xs="24" :md="24" :lg="12" class="marginTop5">
            <div class="titleH4">付款方式</div>
            <a-row>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">付款方式:</div>
                <div>
                  <a-select v-model:value="value3" placeholder="请选择">
                    <a-select-option value="lucy">现付</a-select-option>
                    <a-select-option value="lucy">到付</a-select-option>
                    <a-select-option value="lucy">月结</a-select-option>
                    <a-select-option value="lucy">回单付</a-select-option>
                  </a-select>
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">计价方式:</div>
                <div>
                  <a-select v-model:value="value3" placeholder="请选择">
                    <a-select-option value="lucy">按重量</a-select-option>
                    <a-select-option value="lucy">按体积</a-select-option>
                    <a-select-option value="lucy">按件数</a-select-option>
                    <a-select-option value="lucy">按固定值</a-select-option>
                  </a-select>
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div class="sign">单价:</div>
                <div>
                  <a-input v-model:value="value" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div>运费:</div>
                <div>
                  <a-input v-model:value="value" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div>现付金额:</div>
                <div>
                  <a-input v-model:value="value" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div>月结金额:</div>
                <div>
                  <a-input v-model:value="value" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div>到付金额:</div>
                <div>
                  <a-input v-model:value="value" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="6" class="inputDiv marginTop5">
                <div>代收货款:</div>
                <div>
                  <a-input v-model:value="value" />
                </div>
              </a-col>
              <a-col :xs="12" :md="8" :xl="24" class="inputDiv marginTop5">
                <div>回单付金额:</div>
                <div>
                  <a-input v-model:value="value" />
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <a-row class="borderTypeTop">
          <!-- :xs="12" :sm="6" -->
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>回单类型:</div>
            <div>
              <a-select v-model:value="value3" placeholder="请选择">
                <a-select-option value="lucy">回单袋</a-select-option>
                <a-select-option value="lucy">签运单</a-select-option>
                <a-select-option value="lucy">电子回单</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>回单编号:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>回单数量:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div class="sign">状态类型:</div>
            <div>
              <a-input value="收货" disabled />
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>卸货服务:</div>
            <div>
              <a-select v-model:value="value3" placeholder="请选择">
                <a-select-option value="lucy">是</a-select-option>
                <a-select-option value="lucy">否</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>上楼服务:</div>
            <div>
              <a-select v-model:value="value3" placeholder="请选择">
                <a-select-option value="lucy">是</a-select-option>
                <a-select-option value="lucy">否</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>楼层:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>运输类型:</div>
            <div>
              <a-select v-model:value="value3" placeholder="请选择">
                <a-select-option value="lucy">卡班</a-select-option>
                <a-select-option value="lucy">空运</a-select-option>
                <a-select-option value="lucy">同城</a-select-option>
                <a-select-option value="lucy">同省</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>业务员:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div class="sign">状态网点:</div>
            <div>
              <a-input value="现代物流交易平台" disabled />
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>佣金回扣:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>异形件类型:</div>
            <div>
              <a-select v-model:value="value3" placeholder="请选择">
                <a-select-option value="lucy">4米超长</a-select-option>
                <a-select-option value="lucy">6米超长</a-select-option>
                <a-select-option value="lucy">裹包装</a-select-option>
                <a-select-option value="lucy">其他</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :sm="8" :md="6" :xl="3" class="inputDiv marginTop5">
            <div>等通知放货:</div>
            <div>
              <a-select v-model:value="value3" placeholder="请选择">
                <a-select-option value="lucy">是</a-select-option>
                <a-select-option value="lucy">否</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :xs="24" :sm="16" :lg="6" :xl="9" class="inputDiv marginTop5">
            <div>备注:</div>
            <div>
              <a-input v-model:value="value" />
            </div>
          </a-col>
        </a-row>
        <!-- <a-row class="borderTypeBottom"> </a-row> -->
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import moment, { Moment } from 'moment';
  import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';
  export default defineComponent({
    components: {
      HomeOutlined,
      UserOutlined,
    },
    setup() {
      const dateFormat = 'YYYY/MM/DD';
      const value = ref<string>('');
      return {
        value,
        value1: ref<Moment>(moment(new Date(), dateFormat)),
        value3: ref(''),
      };
    },
  });
</script>
<style lang="less" scoped>
  .content {
    padding: 6px 10px;
    background-color: #fff;

    .textAlignCenter {
      text-align: center;
    }

    .textAlignRight {
      text-align: right;
    }

    .title {
      font-size: 18px;
      font-weight: 600;
    }

    .header_code {
      margin-top: 5px;
      font-size: 16px;
    }

    .header_date {
      padding-bottom: 3px;
      margin-top: 5px;
      font-size: 16px;
    }

    .marginTop {
      margin-top: 10px;
    }

    .marginTop5 {
      margin-top: 5px;
    }

    .sign {
      position: relative;

      &::before {
        position: absolute;
        top: -5px;
        left: -3px;
        font-size: 16px;
        color: #cf1322;
        content: '*';
      }
    }

    .inputDiv {
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 5px;

      & > div {
        margin-right: 5px;
        // font-size: 14px;

        &:first-child {
          position: absolute;
          padding-left: 5px;
        }

        &:last-child {
          width: 100%;
          padding-left: 80px;

          .ant-input {
            // width: auto;
          }

          .ant-calendar-picker {
            width: 100%;
          }
        }
      }
    }

    .borderTop {
      border-top: 10px solid #cae0f6;
    }

    .titleH4 {
      padding-bottom: 5px;
      margin-top: 10px;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #f0f0f0;
    }

    .borderTypeTop {
      padding-top: 5px;
      padding-bottom: 5px;
      margin-top: 10px;
      border-top: 2px solid #cae0f6;
      border-bottom: 2px solid #cae0f6;
    }

    .address {
      display: flex;

      & > div {
        &:nth-child(1) {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 110px;
          margin-right: 10rpx;
          font-size: 14px;
          text-align: center;
        }

        &:nth-child(2) {
          padding-bottom: 10px;
          margin-top: 5px;
          font-size: 14px;
          border-bottom: 3px solid #cae0f6;

          .towCol {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
</style>
